<script setup lang='ts'>

import { getJsIntegral } from '@/api/pointManagement/pointMangement';
import { reactive, ref } from 'vue';

const input = ref('');
const num = ref(1);
const handleChange = (value: number) => {
    // console.log(value);
};
const dialogFormVisible = ref(false);

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
});
interface IntegralType{
    settingConfigId?: null
    settingConfigName?: null
    settingCreatedBy?: null
    settingCreatedTime?: null
    settingDescription?: string
    settingId?: string
    settingKey?: string
    settingName?: string
    settingValue?: number

}
let Integral = ref<IntegralType[]>([]);
getJsIntegral().then(res => {
    // Integral.value?.push((res as any).rows);
    // console.log(Integral.value);
    (res as any).rows.map((item :any) =>{
        // console.log(item);
        Integral.value.push(item);

    });
    console.log(Integral.value);
});
//更改内容
let SettingName = ref();
let SettingValue = ref();
function changeMessage(settingName :string,settingValue:string){
    console.log(settingName);
    console.log(settingValue);
    SettingValue.value = settingValue;
    SettingName.value = settingName;
    dialogFormVisible.value = true;
}
function Confirm(){
    Integral.value.map(item =>{
        if(item.settingName === SettingName.value || typeof(num.value) === Number){
            console.log(item.settingName);
            item.settingValue = num.value;
        }

    });
}
</script>

<template>
    <div>
        <div style='margin-left: 40px;margin-top: 20px'>
            <p>积分设置</p>
        </div>

            <div  v-for='item in Integral.values()' :key='item.settingId' class='Integral' >
                <div @click='changeMessage(item.settingName ,item.settingValue )'>
                <span>{{item.settingName }}</span>
                <el-input
                    v-model="item.settingValue"
                    style="width: 250px;height: 36px;float: right"
                    placeholder="积分"

                />
            </div>
        </div>
<!--        <el-button style='width: 250px;height: 36px;float: right'    plain @click="dialogFormVisible = true" >-->
<!--        </el-button>-->
        <el-dialog v-model="dialogFormVisible" title="积分设置" width="700"     >
                <div style='float: left;width: 200px;text-align: right;line-height: 40px'>{{SettingName}} </div>
                <div style='float: left;margin-left: 20px;width: 300px'>
                    <el-input-number
                        v-model="num"
                        :min="1"
                        controls-position="right"
                        size="large"
                        style='width: 300px'
                        @change="handleChange"

                    />
                </div>

<!--            <el-form :model="form">-->
<!--                <el-form-item :label=SettingName :label-width="formLabelWidth">-->
<!--                    <el-input v-model="form.name" autocomplete="off"   />-->
<!--                </el-form-item>-->
<!--            </el-form>-->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" style='float: right;margin-top: 20px'>取消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false ;Confirm()" style='margin-top: 20px;margin-right: 10px'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

   </div>

</template>

<style scoped lang='scss'>
.Integral{
    margin-left: 100px;
    margin-top: 30px;
    float: left;
    width: 417px;
    height: 36px;

    el-input::placeholder{
        color: red;
    }
}

</style>
